<template>
	<view>
		<view class="headers">

		</view>
		<view class="searchTop">
			<u-icon name="arrow-left" @tap="onBack()" color="#9c9c9c" size="21"></u-icon>
			<view class="searchTops">
				<view class="searchTopIcon">
					<u--image src="/static/search/searchIcon.png" width="20" height="20" shape="circle">
					</u--image>
				</view>
				<input placeholder="输入好友昵称、电话号码" class="inputs" v-model="textValue"
					placeholder-class="nav-input-placeholder" confirm-type="search">
			</view>
		</view>
		<view class="line"></view>
		<view class="searchBottomList">
			<view class="datas">
				<view class="listData" v-if="list.length">
					<view class="lists" v-for="(item, index) in list" :key="index">
						<view class="listLeft" @tap="onGotoUserInfo(item,index)">
							<view class="listImg">
								<u--image :src="item.avator" width="72rpx" height="72rpx" shape="circle">
								</u--image>
							</view>
							<view class="listFont">
								<view class="name">
									{{item.username}}
								</view>
								<view class="fensi">
									粉丝数：{{item.fens}}
								</view>
							</view>
						</view>
						<view class="follow" @tap="followClick(item, index)">
							<u-icon name="plus" v-if="!item.follow" color="rgba(51, 51, 51, 1)" size="10" style="margin-right: 10rpx;">
							</u-icon>
							{{!item.follow ? '关注' : item.follow == 1 ? '已关注' : '互相关注'}}
						</view>
					</view>
					<view class="loadmores" v-if="list.length">
						<u-loadmore :status="loadings.status" :loading-text="loadings.loadingText"
							:loadmore-text="loadings.loadmoreText" :nomore-text="loadings.nomoreText" />
					</view>
				</view>
				<view class="noDatas" v-else-if="textValue != '' && !loading">
					<view class="noData">
						<u--image src="/static/search/listSearchNoData.png" width="115rpx" height="115rpx"
							shape="circle">
						</u--image>
					</view>
					<view class="noDataFont">
						<view>
							哎呀，没有找到叫做“{{textValue}}”小镇居民
						</view>
						<view>
							请重新确认搜索信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup bgColor="transparent" :show="takeOffPopup">
			<view class="takeOffPopups">
				<view class="popupFont">
					你确定要取消关注该用户吗？
				</view>
				<view class="btn">
					<view class="btnSuccess" @tap="onTakeOff()">
						不再关注
					</view>
					<view class="btnClose" @tap="takeOffPopup = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		fuzzy_search
	} from '@/api/collection.js'
	import {
		userFollowAddApi,
	} from '@/api/index.js'
	export default {
		data() {
			return {
				textValue: '',
				list: [],
				searchHistoryList: [], //搜索记录
				loading: true,
				takeOffPopup: false, //取关弹框
				page: 1,
				userData: { //选择当前数据
					data: {},
					index: 0
				},
				loadings: {
					status: 'loadmore',
					loadingText: '努力加载中',
					loadmoreText: '轻轻上拉',
					nomoreText: '实在没有了'
				},
				pageData: {//他人的详情返回数据
					index: 0,
					type: '',
					typeFollow: false
				}
			}
		},
		watch: {
			async textValue() {
				if (this.textValue) {
					this.page = 1
					this.getSearchHistory();
				} else {
					this.textValue = ''
					this.list = []
				}
			}
		},
		onReachBottom() {
			setTimeout(() => {
				if (this.loadingType == 'noMore') return
				this.page++;
				this.getSearchHistory();
			}, 500);
		},
		onShow() {
			uni.$once('clickType', (e) =>{
				this.$nextTick(()=>{
					if (e.pageData.type) {
						if (this.list[e.pageData.index].is_fens && e.pageData.typeFollow) {
							this.list[e.pageData.index].follow = 2
						} else if (!this.list[e.pageData.index].is_fens && e.pageData.typeFollow) {
							this.list[e.pageData.index].follow = 1
						} else {
							this.list[e.pageData.index].follow = 0
						}
					}
				})
			})
		},
		onLoad(options) {
			this.textValue = options.textValue
			this.getSearchHistory()
		},
		onNavigationBarSearchInputConfirmed() {
			console.log(1123)
			this.onPushSetSearch()
		},
		methods: {
			//取消关注
			async onTakeOff() {
				try {
					// 取关操作
					console.log(this.userData)
					const res = await userFollowAddApi({
						beFollowId: this.userData.data.id,
						following: false
					})
					this.list[this.userData.index].follow = 0
					this.takeOffPopup = false
					this.$refs.uToast.show({
						type: 'default',
						message: "取消关注成功"
					});
				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.message || e.data
					});
				}
			},
			//关注点击
			/**
			 * @param {Object} item  item.follow  0未关注1关注了2互相关注
			 * @param {Object} index 下标
			 */
			async followClick(item, index) {
				try {
					let message = ''
					if (!item.follow) {
						uni.showLoading()
						// 关注操作
						const res = await userFollowAddApi({
							beFollowId: item.id,
							following: true
						})
						//判断对方是否关注了你
						if (item.is_fens) {
							this.list[index].follow = 2
						} else {
							this.list[index].follow = 1
						}
						uni.hideLoading()
						message = '关注成功'
						this.$refs.uToast.show({
							type: 'default',
							message: message
						});
					} else {
						this.userData.data = item
						this.userData.index = index
						this.takeOffPopup = true
					}

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.message || e.data
					});
					//TODO handle the exception
				}
			},
			//获取数据
			async getSearchHistory() {
				if (this.textValue) {
					this.page == 1 ? uni.showLoading({title:'搜索中'}) : ''
					try {
						const res = await fuzzy_search({
							fuzzy_search: this.textValue,
							page: this.page
						})
						let listS = res.data.data.data
						if (this.page == 1) {
							this.list = listS
							uni.hideLoading()
						} else {
							this.list = this.list.concat(listS);
						}
						(listS.length == 0 && this.page != 1) || this.list.length < 15 ?
							this.loadings.status = 'nomore' :
							this.loadings.status = 'loading';
						if (!this.list.length) {
							this.loading = false
						}
					} catch (e) {
						this.$refs.uToast.show({
							type: 'default',
							message: e.message || e.data
						});
					}
				}
			},

			//删除输入框
			onDeleteFont() {
				this.textValue = ''
				this.list = []
			},
			//用户点击搜索按钮
			onPushSetSearch() {
				// this.setSearchHistory()
			},
			//跳转用户详情页面
			onGotoUserInfo(item, index) {
				uni.navigateTo({
					url: `/pages/community/userInfo?userId=${item.id}&index=${index}&type=searchType`
				})
			},
			//返回上一页
			onBack() {
				uni.navigateBack()
			},
			onDetail() {
				if (uni.getStorageSync('searchHistory').length) {
					this.show = true
				} else {
					this.$refs.uToast.show({
						type: 'default',
						message: "暂无搜索记录"
					});
				}
			},
			onSuccess() {
				this.show = false
				uni.setStorageSync('searchHistory', [])
				this.getSearchHistory()
			},
			//点击取消
			onCancel() {
				this.getSearchHistory()
				this.textValue = ''
				this.list = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headers {
		height: var(--status-bar-height);
		width: 100%;
	}

	.takeOffPopups {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		width: 82%;
		margin: 20rpx auto 100rpx;

		.popupFont {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 60rpx;
			text-align: center;
		}

		.btn {
			.btnSuccess {
				margin: 53rpx 0;
				width: 100%;
				text-align: center;
			}

			.btnClose {
				background: #ababab;
				border-radius: 60rpx;
				padding: 37rpx 0;
				width: 100%;
				text-align: center;
				color: #000000;
				font-weight: 700;
			}
		}
	}

	.searchTop {
		display: flex;
		align-items: center;
		margin: 30rpx 30rpx 60rpx;
		transition: all .5s;

		.searchTops {
			display: flex;
			align-items: center;
			position: relative;
			background-color: #f3f3f3;
			padding: 20rpx;
			margin-left: 20rpx;
			border-radius: 60rpx;
			width: 100%;

			.searchTopIcon {
				position: absolute;
			}

			.inputs {
				margin-left: 50rpx;
				width: 100%;
			}

			.nav-input-placeholder {
				font-size: 26rpx;
			}
		}

		.searchDeleteFontTops {
			display: flex;
			align-items: center;
			position: relative;
			background-color: #f3f3f3;
			padding: 20rpx;
			border-radius: 60rpx;
			width: 80%;

			.searchTopDeleteFontIcon {
				position: absolute;
				right: 30rpx;
				z-index: 2;
			}

			.inputs {
				margin-left: 20rpx;
				width: 100%;
			}

			.nav-input-placeholder {
				font-size: 26rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 20rpx;
		background: #efefef;
	}

	.searchBottomList {
		margin: 40rpx 35rpx 30rpx;

		.listData {
			.lists {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35rpx;
				border-bottom: 2rpx solid #efefef;
				padding-bottom: 35rpx;

				.listLeft {
					display: flex;
					align-items: center;

					.listImg {
						border-radius: 50%;
						overflow: hidden;
						margin-right: 22rpx;
					}

					.listFont {
						.name {
							font-weight: 700;
							font-size: 28rpx;
							margin-bottom: 10rpx;
							width: 400rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.fensi {
							font-size: 22rpx;
							color: #aaaaaa;
						}
					}
				}

				.follow {
					padding: 0 30rpx;
					height: 60rpx;
					justify-content: space-around;
					color: rgba(51, 51, 51, 1);
					font-size: 22rpx;
					border-radius: 40rpx;
					border: 2rpx solid rgba(51, 51, 51, 1);
					display: flex;
					align-items: center;
				}
			}
		}

		.noDatas {
			margin-top: 100rpx;

			.noData {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.noDataFont {
				text-align: center;
				font-size: 27rpx;
				color: #afafb0;
				margin-top: 10rpx;
			}
		}
	}
</style>
